<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="__WK__/css/style.css">
	<script type="text/javascript" src="__WK__/js/jquery-3.1.0.min.js"></script>
	<style>
		.all{
			border:0px;
			background-color:transparent;
			color:black;
			appearance:none;-moz-appearance:none;-webkit-appearance:none;
		}
	</style>
</head>
<body>
	<div class="header">
		<div class="wrap">
			<ul>
				<a href=""><li>首页</li></a>
				<a href=""><li>口语预约</li></a>
				<a href=""><li>写作预约</li></a>
				<a href=""><li class="selected"></a>个人中心</li>
			</ul>
			<span class="wel">Welecome {$res.stu_nickname}</span>
		</div>
	</div>
	<div class="nav">
		<div class="logo">
			<img src="__WK__/image/logo.png" alt="">
		</div>
		<div class="list">
			<div class="item">
				<img src="__WK__/image/spoken.png" alt="">
				<a href="">口语记录</a>
			</div>
			<div class="item">
				<img src="__WK__/image/write.png" alt="">
				<a href="">作文记录</a>
			</div>
			<div class="item">
				<img src="__WK__/image/user_pre.png" alt="">
				<a href="">个人信息</a>
			</div>

		</div>
	</div>
	<div class="content">
		<div class="title_wrap">
			<span class="title">个人信息</span>
			<!--<a href="{:url('Center/personalInformation')}"></a>-->
			<a id="edit" style="cursor:pointer;"><span class="edit" >编辑</span>
			<img src="__WK__/image/edit.png" alt=""></a>
			<a id='cancel' style="display:none;cursor:pointer;"><span class="edit">取消</span></a>
		</div>
		<form id="personalUpdate" >
			<div class="inp">
				<span class="title1">昵称</span>
			<!-- 	<input type="text" class="inp_in" placeholder="请输入新昵称"> -->
			<!--<span class="inp_text">{$res.stu_nickname}</span>-->
				<input type="hidden" value="{$res.stu_nickname}" id="nickname">
				<input type="text" class="inp_in all more" name="stu_nickname" id="stu_nickname" placeholder="请输入新昵称" value="{$res.stu_nickname}" disabled>
			</div>
			<div class="inp">
				<span class="title1">QQ</span>
				<!-- <input type="text" class="inp_in" placeholder="请输入QQ号"> -->
				<!--<span class="inp_text">{$res.stu_qq}</span>-->
				<input type="hidden" value="{$res.stu_qq}" id="qq">
				<input type="text" class="inp_in all more" name="stu_qq" id="stu_qq" placeholder="请输入QQ号" value="{$res.stu_qq}" onkeyup="value=value.replace(/[^\d]/g,'')"  disabled>
			</div>
			<div class="inp">
				<span class="title1">Zoom</span>
				<!-- <input type="text" class="inp_in" placeholder="请输入Zoom号"> -->
				<!--<span class="inp_text">{$res.stu_zoom}</span>-->
				<input type="hidden" value="{$res.stu_zoom}" id="zoom">
				<input type="text" class="inp_in all more" name="stu_zoom" id="stu_zoom" placeholder="请输入Zoom号" value="{$res.stu_zoom}" onkeyup="value=value.replace(/[^\d]/g,'')"  disabled>
			</div>
			<div style="display:none;" id="inp" >
				<span class="submit" id="but" style="position:relative;top:18px;cursor:pointer;text-align:center;line-height:50px;">提交</span>
			</div>
		</form>
		<form id="courseUpdate">
			<div class="title_wrap" style="margin-top:80px">
			<span class="title">我的余额</span>
			<span class="fu">口语 : {$res.stu_kouyu}课时</span>
			<span class="fu1">作文 : {$res.stu_zuowen}课时</span>
		</div>
			<div class="title_wrap">
				<span class="title">考试设置</span>
				<a id="edit2" style="cursor:pointer"><span class="edit">编辑</span>
					<img src="__WK__/image/edit.png" alt=""></a>
				<a id='cancel2' style="display:none;cursor:pointer;"><span class="edit">取消</span></a>
			</div>
			<div class="inp">
				<span class="title1">选择课程</span>
				<input type="hidden" id="course" value="{$res.stu_course}">
				<select class="inp_select all more2" name="stu_course" id="stu_course" disabled>
					<option value ="">请选择课程</option>
					{foreach name="$course" item="vo"}
					<option {eq name="$res.stu_course" value="$vo.s_id"}selected{/eq} value ="{$vo.s_id}">{$vo.s_name}</option>
					{/foreach}
				</select>
			</div>
			<div class="inp">
				<span class="title1">考试时间</span>
				<!--<span class="inp_text">{$res.stu_testtime}</span>-->
				<input type="hidden" value="{$res.stu_testtime}" id="testtime">
				<input type="text" class="inp_in all more2" name="stu_testtime" id="stu_testtime" placeholder="请输入考试时间 年-月-日" value="{$res.stu_testtime}" onclick="WdatePicker({lang:'zh-cn',dateFmt:'yyyy-MM-dd'})" disabled>
			</div>
			<div class="inp">
				<span class="title1">目标分数</span>
				<!--<span class="inp_text">{$res.stu_score}</span>-->
				<input type="hidden" value="{$res.stu_score}" id="score">
				<input type="text" class="inp_in all more2" name="stu_score" id="stu_score" placeholder="请输入目标分数"  value="{$res.stu_score}" onkeyup="value=value.replace(/[^\d]/g,'')" disabled>
			</div>
			<div class="inp">
				<span class="title2">申请资料<br>是否提交</span>
				<input type="hidden" id="ziliaostatus" value="{$res.stu_ziliaostatus}">
				<select class="inp_select all more2" name="stu_ziliaostatus" id="stu_ziliaostatus" disabled>
					<option value ="">请选择</option>
					<option {eq name="$res.stu_ziliaostatus" value="1"}selected{/eq} value ="1">是</option>
					<option {eq name="$res.stu_ziliaostatus" value="0"}selected{/eq} value ="0">否</option>
				</select>
			</div>
			<div style="display:none;" id="inp2" >
				<span class="submit" id="but2" style="position:relative;top:18px;cursor:pointer;text-align:center;line-height:50px;">提交</span>
			</div>
		</form>
	</div>
	<div class="help">
		<span><img src="__WK__/image/write.png" alt=""></span>
	</div>
	<script src="__STATIC__/js/layer/layer.js"></script>
	<script src="__STATIC__/js/My97DatePicker/WdatePicker.js"></script>
	<script>
		/*个人信息修改*/
		$('#edit').click(function(){
            $(".more").removeClass('all');
            $('.more').removeAttr('disabled');
            $('#inp').show();
            $(this).hide();
            $('#cancel').show();
        })

		$("#cancel").click(function(){
            $(".more").addClass('all');
            $('.more').attr('disabled','true');
            $('#inp').hide();
            $("#edit").show();
            $(this).hide();
            $("#stu_nickname").val($("#nickname").val());
            $("#stu_qq").val($("#qq").val());
            $("#stu_zoom").val($("#zoom").val());
		})

        $("#stu_nickname").change(function(){
            $(this).css('border-color','#999999')
        })
        $("#stu_qq").change(function(){
            $(this).css('border-color','#999999')
        })
        $("#stu_zoom").change(function(){
            $(this).css('border-color','#999999')
        })

        $("#but").click(function(){
            if($("#stu_nickname").val() == $("#nickname").val() && $("#stu_qq").val() == $("#qq").val() &&  $("#stu_zoom").val() == $("#zoom").val()){
                window.location.reload();
			}else if($("#stu_nickname").val() == ""){
                $('#stu_nickname').css('border-color','#FF5722');
				$("#stu_nickname").focus();
				return;
			}else if( $("#stu_qq").val() == ""){
                $('#stu_qq').css('border-color','#FF5722');
                $("#stu_qq").focus();
                return;
			}else if($("#stu_zoom").val() == ""){
                $('#stu_zoom').css('border-color','#FF5722');
                $("#stu_zoom").focus();
                return;
			}else{
				$.ajax({
					type:'post',
					url:"{:url('Center/personalInformationUpdate')}",
					data:$("#personalUpdate").serialize(),
					dataType:"json",
					success:function(res){
						if(res.status == 0){
							layer.msg(res.msg,{icon:5,time:1000});
						}else{
							layer.msg(res.msg,{icon:6,time:1000});
							setTimeout(function(){
                                window.location.reload();
							},800)
						}
					}
				});
			}
        })

        /*考试修改*/
        $('#edit2').click(function(){
            $(".more2").removeClass('all');
            $('.more2').removeAttr('disabled');
            $('#inp2').show();
            $(this).hide();
            $('#cancel2').show();
        })

        $("#cancel2").click(function(){
            $(".more2").addClass('all');
            $('.more2').attr('disabled','true');
            $('#inp2').hide();
            $("#edit2").show();
            $(this).hide();
            $("#stu_course").val($("#course").val());
            $("#stu_testtime").val($("#testtime").val());
            $("#stu_score").val($("#score").val());
            $("#stu_ziliaostatus").val($("#ziliaostatus").val());
            // $("#stu_country").val($("#country").val());
        })

        $("#stu_course").change(function(){
            $(this).css('border-color','#999999')
        })
        $("#stu_testtime").blur(function(){
			if($(this).val() !== ""){
                $(this).css('border-color','#999999')
			}
        })
        $("#stu_score").change(function(){
            $(this).css('border-color','#999999')
        })
        $("#stu_ziliaostatus").change(function(){
            $(this).css('border-color','#999999')
        })
        // $("#stu_country").change(function(){
        //     $(this).css('border-color','#999999')
        // })

        $("#but2").click(function() {
            var pattern = /^((?:19|20)\d\d)-(0[1-9]|1[012])-(0[1-9]|[12][0-9]|3[01])$/;
            if ($("#stu_course").val() == $("#course").val() && $("#stu_testtime").val() == $("#testtime").val() && $("#stu_score").val() == $("#score").val() && $("#stu_ziliaostatus").val() == $("#ziliaostatus").val()) {
                window.location.reload();
            } else if ($("#stu_course").val() == "") {
                $('#stu_course').css('border-color', '#FF5722');
                $("#stu_course").focus();
                return;
            } else if ($("#stu_testtime").val() == "" || pattern.test($("#stu_testtime").val()) == false) {
                $('#stu_testtime').css('border-color', '#FF5722');
                $("#stu_testtime").focus();
                return;
            } else if ($("#stu_score").val() == "" || $("#stu_score").val() <= 0 ) {
                $('#stu_score').css('border-color', '#FF5722');
                $("#stu_score").focus();
                return;
            } else if ($("#stu_ziliaostatus").val() == "") {
                $('#stu_ziliaostatus').css('border-color', '#FF5722');
                $("#stu_ziliaostatus").focus();
                return;
            } else {
                $.ajax({
                    type: 'post',
                    url: "{:url('Center/personalCourseUpdate')}",
                    data: $("#courseUpdate").serialize(),
                    dataType: "json",
                    success: function (res) {
                        if (res.status == 0) {
                            layer.msg(res.msg, {icon: 5, time: 1000});
                        } else {
                            layer.msg(res.msg, {icon: 6, time: 1000});
                            setTimeout(function () {
                                window.location.reload();
                            }, 800)
                        }
                    }
                });
            }
        })

	</script>
</body>
</html>